<template>
  <el-dialog
    title="时段预约"
    :visible.sync="showBookTimeDialog"
    width="50%"
    v-dialogDrag
    :before-close="closeBook"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :inline-message="true"
    @open="getBookTimeLimit"
    class="bookDialog"
  >
    <el-form
      label-width="80px"
      :model="appointmentEntity"
      :rules="addRules"
      ref="bookForm"
    >
      <el-row class="timeBookRow" :gutter="10">
        <el-col :span="12">
          <el-form-item label="客户名称">
            <el-select
              value-key="id"
              v-model="appointmentEntity.bukrs"
              placeholder="客户名称"
              ref="content"
              disabled
              filterable
            >
              <el-option
                v-for="item in comOptions"
                :key="item.id"
                :label="item.companyName"
                :value="item.companyCode"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计划到货">
            <el-date-picker
              v-model="appointmentEntity.yysj"
              type="date"
              value-format="yyyy-MM-dd"
              :disabled="true"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="timeBookRow">
        <el-col :span="12">
          <el-form-item label="联系人" prop="lxr" required>
            <el-input v-model="appointmentEntity.lxr"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="lxdh">
            <el-input v-model="appointmentEntity.lxdh"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="timeBookRow">
        <el-col :span="6">
          <el-form-item label="运输方式" prop="ysfs">
            <el-select v-model="appointmentEntity.ysfs">
              <el-option
                v-for="option in [
                  { value: 1, label: '汽车' },
                  { value: 2, label: '集装箱' },
                  { value: 3, label: '铁路' }
                ]"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="数量" prop="sl">
            <el-input-number
              v-model="appointmentEntity.sl"
              :min="0"
              :precision="1"
              :controls="false"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="预约时段" prop="yysd">
            <el-select v-model="appointmentEntity.yysd">
              <el-option
                v-for="option in bookTimeList"
                :key="option.guid"
                :label="option.timeInterval"
                :value="option.timeInterval"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <span style="line-height:30px">剩余{{ timeLimitCount }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="timeBookRow">
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input
              v-model="appointmentEntity.bz"
              type="textarea"
              maxlength="50"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeBook">取消</el-button>
      <el-button @click="summitBookTime" type="primary">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Msg from "@/public/message.js";
import transportManagerVue from "../../masterData/transportManager.vue";
const patt = /^([京津晋冀蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新][ABCDEFGHJKLMNPQRSTUVWXY][1-9DF][1-9ABCDEFGHJKLMNPQRSTUVWXYZ]\d{3}[1-9DF]|[京津晋冀蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新][ABCDEFGHJKLMNPQRSTUVWXY][\dABCDEFGHJKLNMxPQRSTUVWXYZ]{5})$/;
export default {
  data() {
    return {
      appointmentEntity: {
        lifnr: this.ruleForm.supplierCode,
        name: this.ruleForm.supplierName,
        bukrs: this.ruleForm.companyCode,
        bukrsName: "",
        lxr: ""
      },
      bookTimeList: [],
      addRules: {
        lxr: {
          required: true,
          message: "请填写联系人"
        },
        lxdh: {
          required: true,
          message: "请填写联系电话"
        },
        sl: {
          required: true,
          message: "请填写数量"
        },
        yysd: {
          required: true,
          message: "请选择预约时段"
        },
        ysfs: {
          required: true,
          message: "请选择运输方式"
        }
      }
    };
  },
  props: {
    showBookTimeDialog: {
      type: Boolean,
      default: false
    },
    closeBook: {
      type: Function
    },
    ruleForm: {
      type: Object
    },
    comOptions: {
      type: Array
    },
    rowData: {
      type: Array
    }
  },
  mounted() {},
  methods: {
    getBookTimeLimit() {
      this.appointmentEntity.yysj = new Date(this.ruleForm.planDate).Format(
        "yyyy-MM-dd"
      );
      this.appointmentEntity.bukrs = this.ruleForm.companyCode;
      this.appointmentEntity.ebeln = this.ruleForm.purOrdNo;
      this.appointmentEntity.lifnr = this.ruleForm.supplierCode;
      this.appointmentEntity.name = this.ruleForm.supplierName;
      this.appointmentEntity.sqsj = this.ruleForm.auditDate;
      this.appointmentEntity.xhdd = this.ruleForm.area;
      let companyCode = this.ruleForm.companyCode;
      this.appointmentEntity.bukrsName = this.comOptions.find(item => {
        return item.companyCode == companyCode;
      }).companyName;
      this.appointmentEntity.ekgrp = this.rowData.find(item => {
        return item.purOrdNo == this.appointmentEntity.ebeln;
      }).purGroup;
      this.appointmentEntity.zzchhao = this.ruleForm.carNum;
      this.$http
        .getBookTimeLimit({ companyCode })
        .then(res => {
          if (res.data.code == 1) {
            this.bookTimeList = res.data.rows;
          } else {
            this.showBookTimeDialog = false;
            Msg.showErrorMsg(res.data.info);
          }
        })
        .catch(err => {
          this.showBookTimeDialog = false;
          Msg.showErrorMsg(err.data.message);
        });
    },
    summitBookTime() {
      let _this = this;
      if (this.timeLimitCount < 1) {
        Msg.showPopMsg("该时段剩余数量不足,请选择其他时段!");
        return;
      }
      this.$refs["bookForm"].validate(valid => {
        if (valid) {
          _this.$emit("getBookTimeForm", this.appointmentEntity);
        }
      });
    }
  },
  computed: {
    timeLimitCount() {
      let bookList = this.bookTimeList.filter(item => {
        return item.timeInterval == this.appointmentEntity.yysd;
      });
      return bookList.length > 0 ? bookList[0].limitCount : "";
    }
  }
};
</script>

<style lang="less">
.bookDialog {
  .timeBookRow {
    margin-bottom: 18px;
    .el-input-number {
      width: 100%;
      input.el-input__inner {
        text-align: left;
      }
    }
  }
  .el-dialog__body {
    height: 240px;
  }
}
</style>
